<template>
  <!-- 交易管理中我的订单页面右侧结构 -->
  <!-- 第六行的v-if为false则显示详情页 -->
  <div class="order">
    <div class="order-right" v-if="true">
      <div class="order-nav">
        <a
          v-for="(item, index) in navElement"
          :key="index"
          href="javascript:;"
          @click="changeNav(item.status)"
          :class="{ active: item.status === currentA }"
          >{{ item.title }}</a
        >
      </div>
      <div class="order-none" :class="{ show: currentA === 1 }">
        <SingleOrder />
      </div>
      <div class="order-none" :class="{ show: currentA === 2 }">
        <SingleOrder />
      </div>
      <div class="order-none" :class="{ show: currentA === 3 }">
        <SendOrder />
      </div>
      <div class="order-none" :class="{ show: currentA === 4 }">
        <ReceiveOrder />
      </div>
      <div class="order-none" :class="{ show: currentA === 5 }">
        <EvaluateOrder />
      </div>
      <div class="order-none" :class="{ show: currentA === 6 }">
        <CompleteOrder />
      </div>
      <div class="order-none" :class="{ show: currentA === 7 }">
        <CancelOrder />
      </div>
    </div>
    <div class="order-right" v-else>
      <SingleDetail />
    </div>
  </div>
  <!-- 取消订单 -->
  <div style="display: none">
    <CancellationOrder></CancellationOrder>
  </div>
  <!-- 支付成功 -->
  <div style="display: none">
    <PayingOrder></PayingOrder>
  </div>
  <!-- 查看物流 -->
  <div style="display: none">
    <TransportOrder></TransportOrder>
  </div>
</template>
<style lang="less" scoped>
.order {
  .order-right {
    width: 1000px;
    height: 100%;
    background-color: #fff;
    border: 1px solid #f5f5f5;

    .order-nav {
      width: 1000px;
      height: 60px;
      background-color: #fff;

      a {
        display: inline-block;
        width: 110px;
        height: 60px;
        color: #333;
        font-size: 16px;
        line-height: 56px;
        text-decoration: none;
        border: 1px solid #f5f5f5;
      }

      .active {
        border-top: 2px solid #27ba9b;
        border-right: 1px solid #f5f5f5;
      }
    }

    .order-none {
      display: none;
      .show {
        display: block;
      }
    }

    .order-none {
      display: none;
    }

    .order-show {
      display: block;
    }
  }
}
</style>
<script setup lang="ts">
import SingleOrder from '@/views/Member/Order/NavBar/SingleOrder.vue';
import SendOrder from '@/views/Member/Order/NavBar/SendOrder.vue';
import EvaluateOrder from '@/views/Member/Order/NavBar/EvaluateOrder.vue';
import ReceiveOrder from '@/views/Member/Order/NavBar/ReceiveOrder.vue';
import CompleteOrder from '@/views/Member/Order/NavBar/CompleteOrder.vue';
import CancelOrder from '@/views/Member/Order/NavBar/CancelOrder.vue';
import SingleDetail from '@/views/Member/Order/NavBar/SingleDetail.vue';
import CancellationOrder from './NavBar/CancellationOrder.vue';
import PayingOrder from '@/views/Member/Order/NavBar/PayingOrder.vue';
import TransportOrder from '@/views/Member/Order/NavBar/TransportOrder.vue';
import { ref } from 'vue';
const navElement = ref([
  { title: '全部订单', status: 1 },
  { title: '待付款', status: 2 },
  { title: '待发货', status: 3 },
  { title: '待收货', status: 4 },
  { title: '待评价', status: 5 },
  { title: '已完成', status: 6 },
  { title: '已取消', status: 7 },
]);
let currentA = ref(1);
const changeNav = (navNum: number) => {
  currentA.value = navNum;
};
</script>
